<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<jsp:include page="/WEB-INF/back/commons/head.jsp"/>
<title>商品分类</title>

<script type="text/javascript">
$(function(){
	//动态加载树
	$('#Manatree').tree({
		url:"/product/proProductClassfy/sonlist1.do",
		onDblClick: function(node){
			addTab("查看"+node.text,"view.do?id="+node.id);
			
		}
	});
	
	var content = '<iframe scrolling="auto" frameborder="0"  src=add.do?id=newtype style="width:100%;height:100%;"></iframe>';
	
	//页面初始的时候添加的一个新增页面
	$('#tt').tabs('add',{   
	    title:'新增',   
	    content:content,   
	    closable:false,   
	     
	});  

});
function addTab(title, url){
	if ($('#tt').tabs('exists', title)){
		$('#tt').tabs('select', title);
	} else {
		var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
		$('#tt').tabs('add',{
			title:title,
			content:content,
			closable:true
		});
	}
}

//点击鼠标右键修改项目功能
function alertxm(){
	var t = $('#Manatree');
	var node = t.tree('getSelected');
	addTab("修改"+node.text,"alter.do?id="+node.id);
}
//点击鼠标右键添加模块功能
function appendAll(){
	var t = $('#Manatree');
	var node = t.tree('getSelected');
	addTab("添加"+node.text,"add.do?id="+node.id);
}
//点击鼠标右键删除模块功能
function removeAll(){
	var t = $('#Manatree');
	var node = t.tree('getSelected');
	$.ajax({
		   type: "post",
		   url: "remove.do",
		   dataType: "json",
		   data: "id="+node.id,
		   success: function (data){
			   $('#Manatree').tree('remove',node.target);
               alert(data.msg);
           },
           error: function (XMLHttpRequest, textStatus, errorThrown) { 
               alert(errorThrown); 
       		} 
		});
	
}
</script>
</head>
<body>
<jsp:include page="/WEB-INF/back/commons/show_message.jsp"/>

 <div id="cc" class="easyui-layout" data-options="fit:true" style="width:100%;">  
    <div data-options="region:'west',title:'商品分类 - 列表',split:true" style="width:150px;">
   
  	<ul id="Manatree" class="easyui-tree" data-options="lines:true,animate:true,
  		onContextMenu: function(e,node){
					e.preventDefault();
					$(this).tree('select',node.target);//右键显示菜单
					if($(this).tree('getSelected').id.length == 2){
						$('#xm1').css('display', 'block');
						$('#xm2').css('display', 'block');
						$('#xm3').css('display', 'block');
						$('#mk1').css('display', 'none');
						$('#mk2').css('display', 'none');
						$('#mk3').css('display', 'none');
					}else{
						$('#xm1').css('display', 'none');
						$('#xm2').css('display', 'none');
						$('#xm3').css('display', 'none');
						$('#mk1').css('display', 'block');
						$('#mk2').css('display', 'block');
						$('#mk3').css('display', 'block');
					}
					$('#mm').menu('show',{
						left: e.pageX,
						top: e.pageY
					});
				}">
		<div id="mm" class="easyui-menu" style="width:120px;">
			<div id="xm1" display="none" onclick="appendAll()" data-options="iconCls:'icon-add'">添加模块</div>
			<div id="xm2" display="none" onclick="removeAll()" data-options="iconCls:'icon-remove'">删除项目</div>
			<div id="xm3" display="none" onclick="alertxm()" data-options="iconCls:'icon-edit'">修改项目</div>
			<div id="mk1" display="block" onclick="appendAll()" data-options="iconCls:'icon-add'">添加模块</div>
			<div id="mk2" display="block" onclick="removeAll()" data-options="iconCls:'icon-remove'">删除模块</div>
			<div id="mk3" display="block" onclick="alertxm()" data-options="iconCls:'icon-edit'">修改模块</div>
		</div>
  	</ul>
    </div>  
    <div id="tt" class="easyui-tabs" data-options="region:'center',fit:true" style="padding:5px;background:#eee;">
	    
    </div>  
</div>  

</body>
</html>
